import React from 'react';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import * as Action from "../actions";


import Header from "../header.js"
import Cuisine from "./cuisine.js"
import Dishes from "./dishes.js"
import Footer from "../footer.js";
import Car from "./shoppingCar.js";


class Food extends React.Component {
    constructor(props) {
        super(props);
        this.state=({
            "shoppingCar": true,
            "fixed": true,
            "confirm":false
        })
        var parm=JSON.parse(sessionStorage.getItem('userOpenid'));
        this.props.actions.showFood(`storeId=${parm.storeId}`);
    } 
    change(){
        this.setState({
            "shoppingCar": !this.state.shoppingCar,
        });
    }
 

    render() {
        // console.log(this.props.productList);
        
        document.title="菜单";
        return <div>
            <Header fixed={this.state.fixed}/>
            <div className="foodinfo">
                <Cuisine cuisines={this.props.productList.map((item)=>({"type":item.type,"name":item.name}))}/>
                <Dishes dishes={this.props.productList}/>
            </div>
            <Footer change={this.change.bind(this)} confirm={this.state.confirm}/>
            {
                !this.state.shoppingCar
                ? [<Car/>,<div className="meng" onClick={()=>{this.setState({"shoppingCar" : true})}}></div>]
                : null
            }
        </div>
    }
}
export default connect(
    ({foodReducer})=>{  
        return {
            productList:foodReducer.productList,
            shop:foodReducer.shop
        }     
    },
    (dispatch) => {
        return {
            actions: bindActionCreators(Action,dispatch)
        }
    }
)(Food);